<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>互联网金融贷款平台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/user.css"/>
    <link rel="stylesheet" type="text/css" href="../css/jquery.datetimepicker.css"/>
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script src="../script/user.js" type="text/javascript"></script>
    <script src="../angularjs/vue.js"></script>
    <script src="../angularjs/axios.min.js"></script>
    <!-- 引入样式eleme -->
    <link rel="stylesheet" href="../angularjs/index.css">
    <!-- 引入组件库 -->
    <script src="../angularjs/index.js"></script>
    <!-- bootstarp -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
<div id="app">

    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">金证信贷系统</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="个人中心首页.html"><span></span>首页</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-user"></span>角色: {{nickname}}</a></li>
            <li><a href="javascript:void(0)" @click="logout()"><span class="glyphicon glyphicon-log-in"></span>注销</a>
            </li>
        </ul>

    </div>
    <!--个人中心-->
    <div class="wrapper wbgcolor">
        <div class="w1200 personal">
            <div id="personal-left" class="personal-left">
                <ul>
                    <li class=""><span><a href="个人中心首页.html"><i class="dot dot1"></i>账户总览</a></span></li>
                    <li class="pleft-cur"><span><a href="个人中心-账户设置.html"><i class="dot dot02"></i>账户设置</a> </span></li>
                    <li class=""><span><a href="个人中心-借款记录.html"><i class="dot dot02"></i>查看借款记录</a> </span></li>
                    <li class=""><span><a href="个人中心-查看申请记录.html"><i class="dot dot02"></i>查看申请记录</a> </span></li>
                    <li class=""><span><a href="../applyforaloan.html"><i class="dot dot02"></i>申请贷款</a> </span></li>
                </ul>
            </div>
            <div class="personal-main">
                <div class="personal-zhsz">
                    <h3><i>账户设置</i></h3>

                    <ul v-if="ok">
                        <li><i class="grzxbg p-right"></i><span class="zhsz-span1">
                            手机号</span><span class="zhsz-span2">{{BorrowerInfo.mobile}}</span><span
                                class="zhsz-span3">
                             <el-link type="primary" data-toggle="modal" data-target="#myModal">修改个人信息</el-link>
                        </span>
                        </li>
                        <input type="hidden" value="false" id="authenticationMobile">
                        <li><i class="grzxbg p-right"></i><span class="zhsz-span1">身份认证</span><span
                                class="zhsz-span2">{{BorrowerInfo.idCard}}</span><span class="zhsz-span3">
                            <el-link type="primary">更改</el-link></span></li>
                        <li><i class="grzxbg p-right"></i><span class="zhsz-span1">银行卡</span><span
                                class="zhsz-span2">{{BorrowerInfo.bankNo}}</span><span class="zhsz-span3">
                             <el-link type="primary">更改</el-link>
                        </span></li>


                        <li><i class="grzxbg p-right"></i><span class="zhsz-span1">居住地址</span><span
                                class="zhsz-span2">{{BorrowerInfo.address}}</span><span class="zhsz-span3"> <el-link
                                type="primary">更改</el-link></span>
                        </li>
                        <li><i class="grzxbg p-right"></i><span class="zhsz-span1">紧急联系人</span><span
                                class="zhsz-span2">姓名：{{BorrowerInfo.contactsName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            电话：{{BorrowerInfo.contactsMobile}}</span><span class="zhsz-span3"> <el-link type="primary">更改</el-link></span>
                        </li>
                    </ul>
                    <div v-else>
                        <h1>您还未实名认证，请先实名认证！</h1>
                        <div style="margin-top: 20px">
                            <el-button type="success" @click="Attestation()">实名认证</el-button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--网站底部-->

    </div>
    <!--模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h3 class="modal-title" id="myModalLabel">
                        修改个人信息
                    </h3>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover table-striped table-responsive text-center">
                        <tr>
                            <td>手机号</td>
                            <td><input type="text" v-model="BorrowerInfo.mobile"></td>
                        </tr>
                        <tr>
                            <td>身份证</td>
                            <td><input type="text" v-model="BorrowerInfo.idCard"></td>
                        </tr>
                        <tr>
                            <td>银行卡</td>
                            <td><input type="text" v-model="BorrowerInfo.bankNo"></td>
                        </tr>
                        <tr>
                            <td>居住地址</td>
                            <td><input type="text" v-model="BorrowerInfo.address"></td>
                        </tr>
                        <tr>
                            <td>紧急联系人姓名</td>
                            <td><input type="text" v-model="BorrowerInfo.contactsName"></td>
                        </tr>
                        <tr>
                            <td>紧急联系人电话</td>
                            <td><input type="text" v-model="BorrowerInfo.contactsMobile"></td>
                        </tr>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="updateUser()">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>


</body>
</html>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            BorrowerInfo: {
                user: {
                    token: null,
                },
            },
            nickname:null,
            ok: true,
            Result: null,
        },
        methods: {
            open() {
                this.$message.error(vue.Result.msg + ":" + vue.Result.data);
            }, open2() {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            },
            init: function () {
                //初始化方法
                vue.nickname=localStorage.getItem("nickname");
                // axios.post("http://127.0.0.1:10088/user/getBorrowerInfoByUid?token=" + localStorage.getItem("token")).
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/getBorrowerInfoByUid',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(function (response) {

                    if (response.data.code == 200) {
                        //成功
                        vue.BorrowerInfo = response.data.data;

                    } else {
                        vue.ok = false;
                    }
                })
            }
            ,
            Attestation: function () {
                //实名认证
                location.href = "../applyforaloan.html"
            }
            ,
            updateUser: function () {
                vue.BorrowerInfo.user.token = localStorage.getItem("token");
                /* axios.post("http://127.0.0.1:10088/user/updateUser",
                     vue.BorrowerInfo
                 )*/
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/updateUser',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token")
                    },
                    data: vue.BorrowerInfo
                }).then(function (response) {
                    vue.Result = response.data;
                    if (vue.Result.code == 200) {
                        //修改成功
                        vue.open2();
                        setInterval(() => {
                            location.href = "个人中心-账户设置.html";
                        }, 1000);
                    } else {
                        //修改失败提示信息
                        vue.open();
                    }
                });
            },
            logout: function () {
                //注销
                localStorage.removeItem("token");
                location.href="login.html"
            }
        }
    })
    vue.init();
</script>